<template>

    <div>
    <!-- 轮播图 api-->
    <!-- 这里父组件向子组传递信息 把lunbotu 这个数组传递过去 -->
    <!-- <swiper  :lunbotuList="lunbotu"></swiper> -->

    <mt-swipe :auto="4000">
    <mt-swipe-item><img src="../../images/01.jpg" alt=""></mt-swipe-item>
    <mt-swipe-item><img src="../../images/01.jpg" alt=""></mt-swipe-item>
    <mt-swipe-item><img src="../../images/01.jpg" alt=""></mt-swipe-item>
    </mt-swipe>

    <!-- 6宫格 -->
<ul class="mui-table-view mui-grid-view mui-grid-9">		            
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="/home/newpage">
                <img src="../../images/menu1.png" alt="">
                <div class="mui-media-body">新闻资讯</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="/home/photoSharing">
                <img src="../../images/menu2.png" alt="">
                <div class="mui-media-body">图片分享</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="/home/goodspurchased">
                <img src="../../images/menu3.png" alt="">
                <div class="mui-media-body">商品购买</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu4.png" alt="">
                <div class="mui-media-body">留言反馈</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu5.png" alt="">
                <div class="mui-media-body">视频专区</div></a></li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu6.png" alt="">
                <div class="mui-media-body">联系我们</div></a></li>
    </ul> 

    </div>
</template>

<script>
    //mint-ui
    import { Toast } from 'mint-ui'

    //导入轮播图组件
    import swiper from '../subcomponents/swiper.vue'

export default{
    ddata(){
        return {
            lunbotu:[] //新建数组 保存轮播图
        }
    },
    created(){
        //生命周期 引用getLunbotu方法
        // this.getLunbotu()
    },
    methods:{
        getLunbotu(){  //轮播图 获取请求
            // this.$http.jsonp("api/getlunbo").then(result => {
            //     if(result.body.status === 0){
            //         this.lunbotu = result.body.message;
            //     }else{

            //         Toast("加载轮播失败")
            //     }
            // })
        }
    },
    // 将组件挂载到这里
    components:{
        swiper
    }
}
</script>

<style lang="scss"  scoped>
// 这是 模拟数据中的 轮播图
      .mint-swipe{
        height: 200px;


    .mint-swipe-item
    &:nth-child(1){
        background-color: red;
    
    }
    .mint-swipe-item
    &:nth-child(2){
        background-color: orange;
    }
    .mint-swipe-item
    &:nth-child(3){
        background-color: blue;
    }
        
     img {
      width: 100%;
      height: 100%;
    }
    }
  
    
  
  .mui-table-view.mui-grid-9{
      background-color: #fff;
      border: none;

      img{
          width: 60px;
          height: 60px;

      }
     
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
      border: 0;
  }
 
</style>